<template>
  <div id="calendar">
    <!-- 年份 月份 -->
    <div class="month">
      <ul>
        <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
        <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
        <li class="year-month" @click="pickYear(currentYear,currentMonth)">
          <span class="choose-year">{{ currentYear }}</span>
          <span class="choose-month">{{ currentMonth }}月</span>
        </li>
        <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
      </ul>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li style="color:red">六</li>
      <li style="color:red">日</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
      <!-- v-for循环 每一次循环用<li>标签创建一天 -->
      <li  v-for="dayobject in days" style="height: 120px;">
        <!--本月-->
        <!--如果不是本月  改变类名加灰色-->

        <span v-if="dayobject.dutyTime.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.dutyTime.getDate() }}</span>

        <!--如果是本月  还需要判断是不是这一天-->
        <span v-else>
          <!--今天  同年同月同日-->
                <span v-if="dayobject.dutyTime.getFullYear() == new Date().getFullYear() && dayobject.dutyTime.getMonth() == new Date().getMonth() && dayobject.dutyTime.getDate() == new Date().getDate()" class="active">{{ dayobject.dutyTime.getDate() }}</span>
                <span v-else>{{ dayobject.dutyTime.getDate() }}</span>
            </span>
        <!--&lt;!&ndash;显示剩余多少数量&ndash;&gt;-->
        <!--<p v-if="leftobj[dayobject.index]">剩余：<span style="color: red" >{{leftobj[dayobject.index].count}}</span></p>-->
        <!--&lt;!&ndash;&ndash;&gt;-->
        <!--<button @click="order(dayobject)" v-if="leftobj[dayobject.index]">预定</button>-->
        <br/>
        <br/>
        <el-select v-model="dayobject.dutyState"  v-if="days[dayobject.index]" size="mini" @change="changeDutyState(dayobject)"  placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
    </ul>
  </div>
</template>

<script>

  import API_duty from "../../api/api_escort_duty";

  export default {
    props: {
      dutyData: {
        type:Array,
        required:true
      }
    },

    data() {
      return {
        // 值班表
        currentDay: 1,
        currentMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        options: [{
          value: '0',
          label: '空闲'
        }, {
          value: '1',
          label: '已上钟'
        }, {
          value: '2',
          label: '休息/请假'
        }, {
          value: '3',
          label: '已预约'
        }],

      };
    },
    methods: {
      changeDutyState:function (day) {  //改变值班状态
        console.log("改变值班状态");
        console.log("day:" + day);
        let that = this;
        that.loading = true;
        let param = {
          escortUserId : day.escortUserId,
          dutyTime:day.dutyTime,
          dutyState:day.dutyState,
        }
        console.log("param:" + param);
        API_duty.editState(param).then(function (result) {
          that.loading = false;
          console.log(result);
          if (0 == result.code){
            that.$message.success({
              showClose: true,
              message: "更改值班状态成功",
              duration: 2000
            });
          } else{
            that.$message.error({
              showClose: true,
              message: "更改值班状态失败",
              duration: 2000
            });
          }
        }).catch(function (err) {
          that.loading = false;
          console.log(err);
          that.$message.error({
            showClose: true,
            message: "请求出现异常",
            duration: 2000
          });
        });
      },
      initData: function(cur) {
        console.log(this.dutyData);
        var date;
        var index=0;   //控制显示预定的天数 ，比如下面设置只能预定三天的
        //this.initleftcount(); 每次初始化更新数量
        //有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
        // 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
        //还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）


        if (cur) {
          date = new Date(cur);
        } else {
          var now=new Date();
          var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
          d.setDate(35);
          date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
        }
        this.currentDay = date.getDate();
        this.currentYear = date.getFullYear();
        this.currentMonth = date.getMonth() + 1;

        this.currentWeek = date.getDay(); // 1...6,0
        if (this.currentWeek == 0) {
          this.currentWeek = 7;
        }
        var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
        this.days.length = 0;
        var id = this.dutyData[index].escortUserId;
        // 今天是周日，放在第一行第7个位置，前面6个
        //初始化本周
        for (var i = this.currentWeek - 1; i >= 0; i--) {
          var d = new Date(str);
          d.setDate(d.getDate() - i);
          var dayobject={};
          dayobject.dutyTime=d;
          var now=new Date();
          if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
          {
            dayobject.dutyState = this.dutyData[index].dutyState.toString();
            dayobject.escortUserId = id;
            dayobject.index=index++;//从今天开始显示供预定的数量
          } else if(index!=0&&index<=30) {
            if (index < this.dutyData.length ){
              dayobject.dutyState = this.dutyData[index].dutyState.toString();
              dayobject.escortUserId = id;
            } else {
              dayobject.value = '0';
            }
            dayobject.index = index++;//从今天开始3天内显示供预定的数量
          }

          this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用


        }
        //其他周
        for (var i = 1; i <= 35 - this.currentWeek; i++) {
          var d = new Date(str);
          d.setDate(d.getDate() + i);
          var dayobject={};
          dayobject.dutyTime=d;
          var now=new Date();
          if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
          {
            dayobject.dutyState = this.dutyData[index].dutyState.toString();
            dayobject.escortUserId = id;
            dayobject.index=index++;
          } else if(index!=0&&index<=30) {
            if (index < this.dutyData.length ){
              dayobject.dutyState = this.dutyData[index].dutyState.toString();
              dayobject.escortUserId = id;
            } else {
              dayobject.dutyState = '0';
              dayobject.escortUserId = id;
            }
            dayobject.index = index++;
          }
          this.days.push(dayobject);
        }

      },
      setData: function(cur,info) {
        console.log(this.dutyData);
        this.dutyData = info;
        var date;
        var index=0;   //控制显示预定的天数 ，比如下面设置只能预定三天的
        //this.initleftcount(); 每次初始化更新数量
        //有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
        // 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
        //还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）


        if (cur) {
          date = new Date(cur);
        } else {
          var now=new Date();
          var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
          d.setDate(35);
          date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
        }
        this.currentDay = date.getDate();
        this.currentYear = date.getFullYear();
        this.currentMonth = date.getMonth() + 1;

        this.currentWeek = date.getDay(); // 1...6,0
        if (this.currentWeek == 0) {
          this.currentWeek = 7;
        }
        var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
        this.days.length = 0;
        var id = this.dutyData[index].escortUserId;
        // 今天是周日，放在第一行第7个位置，前面6个
        //初始化本周
        for (var i = this.currentWeek - 1; i >= 0; i--) {
          var d = new Date(str);
          d.setDate(d.getDate() - i);
          var dayobject={};
          dayobject.dutyTime=d;
          var now=new Date();
          if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
          {
            dayobject.dutyState = this.dutyData[index].dutyState.toString();
            dayobject.escortUserId = id;
            dayobject.index=index++;//从今天开始显示供预定的数量
          } else if(index!=0&&index<=30) {
            if (index < this.dutyData.length ){
              dayobject.dutyState = this.dutyData[index].dutyState.toString();
              dayobject.escortUserId = id;
            } else {
              dayobject.value = '0';
            }
            dayobject.index = index++;//从今天开始3天内显示供预定的数量
          }

          this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用


        }
        //其他周
        for (var i = 1; i <= 35 - this.currentWeek; i++) {
          var d = new Date(str);
          d.setDate(d.getDate() + i);
          var dayobject={};
          dayobject.dutyTime=d;
          var now=new Date();
          if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
          {
            dayobject.dutyState = this.dutyData[index].dutyState.toString();
            dayobject.escortUserId = id;
            dayobject.index=index++;
          } else if(index!=0&&index<=30) {
            if (index < this.dutyData.length ){
              dayobject.dutyState = this.dutyData[index].dutyState.toString();
              dayobject.escortUserId = id;
            } else {
              dayobject.dutyState = '0';
              dayobject.escortUserId = id;
            }
            dayobject.index = index++;
          }
          this.days.push(dayobject);
        }

      },
      pickPre: function(year, month) {
        // setDate(0); 上月最后一天
        // setDate(-1); 上月倒数第二天
        // setDate(dx) 参数dx为 上月最后一天的前后dx天
        var d = new Date(this.formatDate(year , month , 1));
        d.setDate(0);
        this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      },
      pickNext: function(year, month) {
        var d = new Date(this.formatDate(year , month , 1));
        d.setDate(35);
        this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      },
      pickYear: function(year, month) {
        alert(year + "," + month);
      },

      // 返回 类似 2016-01-02 格式的字符串
      formatDate: function(year,month,day){
        var y = year;
        var m = month;
        if(m<10) m = "0" + m;
        var d = day;
        if(d<10) d = "0" + d;
        return y+"-"+m+"-"+d
      },
    },
    mounted() {
      this.initData(new Date());
    }

  };
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }

  ul {
    list-style-type: none;
  }

  body {
    font-family: Verdana, sans-serif;
    background: #E8F0F3;
  }
  #calendar{
    width:80%;
    margin: 0 auto;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
  }
  .month {
    width: 100%;
    background: #00B8EC;
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .year-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .year-month:hover {
    background: rgba(150, 2, 12, 0.1);
  }

  .choose-year {
    padding-left: 20px;
    padding-right: 20px;
  }

  .choose-month {
    text-align: center;
    font-size: 1.5rem;
  }

  .arrow {
    padding: 30px;
  }

  .arrow:hover {
    background: rgba(100, 2, 12, 0.1);
  }

  .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  .weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #00B8EC;
    display: flex;
    flex-wrap: wrap;
    color: #FFFFFF;
    justify-content: space-around;
  }

  .weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
  }

  .days {
    padding: 0;
    background: #FFFFFF;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .days li {
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 1rem;
    color: #000;
  }

  .days li .active {
    padding: 6px 10px;
    border-radius: 50%;
    background: #00B8EC;
    color: #fff;
  }

  .days li .other-month {
    padding: 5px;
    color: gainsboro;
  }

  .days li:hover {
    background: #e1e1e1;
  }
</style>
